<template>
	<div class="Website-body">
		<!-- <div>
			<p>文章数目:</p> <span>{{ list.length }}</span>
		</div> -->
		<div>
			<p>更新时间:</p> <span>{{ uptime }}</span>
		</div>
		<div>
			<p>访问次数:</p> <span>{{ visit }}</span>
		</div>
		<div>
			<p>运行时长:</p> <span>{{ runtime }}</span>
		</div>
	</div>
</template>

<script setup>
	import {
		ref,
		onMounted,
		onUnmounted
	} from 'vue';
	import {
		useRouter
	} from 'vue-router';
	import emitter from '../../../../utils/evenBus';
	import axios from 'axios';

	// 定义响应式数据
	const uptime = ref('');
	const visit = ref(0);
	const runtime = ref('');
	const starttime = ref('');
	const Time = ref('');

	// 格式化时间函数
	const formatTime = (dateString) => {
		const options = {
			year: 'numeric',
			month: '2-digit',
			day: '2-digit'
		};
		const date = new Date(dateString);
		return date.toLocaleDateString('zh-CN', options);
	};

	// 更新当前时间函数
	const updateTime = () => {
		const now = new Date();
		const year = now.getFullYear();
		const month = ('0' + (now.getMonth() + 1)).slice(-2);
		const day = ('0' + now.getDate()).slice(-2);
		const hours = ('0' + now.getHours()).slice(-2);
		const minutes = ('0' + now.getMinutes()).slice(-2);
		const seconds = ('0' + now.getSeconds()).slice(-2);
		return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
	};

	// 计算运行时间函数
	const getRunTime = (startTime, ontime) => {
		const start = new Date(startTime);
		const end = new Date(ontime);
		const diffInMilliseconds = end - start;
		const diffInSeconds = Math.floor(diffInMilliseconds / 1000);
		const hours = Math.floor(diffInSeconds / 3600);
		const minutes = Math.floor((diffInSeconds % 3600) / 60);
		const seconds = diffInSeconds % 60;
		const day = Math.floor(hours / 24);
		return `${day}天${hours}小时${minutes}分钟${seconds}秒`;
	};

	function getVisit() {
		const res = axios.get("/api/people/select");
		res
			.then(response => {
				console.log(response);
				if (response.data.code == 200) {
					visit.value = response.data.data[0].num;
				} else {
					console.log(' 获取用户数失败:', response.data.msg);
				}
			})
			.catch(error => {
				// 请求失败，处理错误
				if (error.response) {
					// 请求已发送，但服务器响应的状态码不在 2xx 范围内
					console.log('响应状态码:', error.response.status);
					console.log('响应数据:', error.response.data);
				} else if (error.request) {
					// 请求已发送，但没有收到响应
					console.log('没有收到响应:', error.request);
				} else {
					// 在设置请求时发生错误
					console.log('错误信息:', error.message);
				}
			});
	}

	const handUpdate = (time) => {
		uptime.value = time;
	};


	onMounted(() => {
		// 初始化开始时间和更新时间
		getVisit();
		emitter.on('ArticleUpdate', handUpdate);
		starttime.value = updateTime();
		Time.value = starttime.value;
		// 每秒更新时间并计算运行时长
		const intervalId = setInterval(() => {
			Time.value = updateTime();
			runtime.value = getRunTime(starttime.value, Time.value);
		}, 1000);

		return () => {
			clearInterval(intervalId);
		};
	});

	onUnmounted(() => {

	});
</script>

<style lang="scss" scoped>
	* {
		margin: 0px;
		padding: 0px;
		border: none;
		border-radius: 0px;
		font-size: 14px;
		font-weight: 300px;
		color: #000;
	}

	.Website-body {
		overflow: hidden;
		margin-top: 30px;
		width: 100%;
		min-width: 150px;
		height: 200px;
		border: none;
		color: #000;
		display: block;

		backdrop-filter: blur(5px);
		border-radius: 20px;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);

		div {
			margin: auto;
			margin-top: 32px;
			width: 100%;
			height: 25px;
		}

		p {
			all: none;
			position: absolute;
			left: 5%;
			margin: 0px 0px 0px 0px;
			font-weight: 700;
		}

		span {
			all: none;
			position: absolute;
			right: 5%;
			margin: 0px 0px 0px 0px;
		}
	}
</style>